<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>功能</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>   
<style>
/*外框容器*/
.page-container{height: 100%;width: 100%;  overflow: hidden; display: none;}
/*内容容器*/
.page-wrap{padding-bottom:50px; width: 100%;height: 100%; overflow: auto; }
.p-img{ width: 100%; }
.p-img img{display: block; margin:10px auto;min-height: 80px; width: 93.33%;}

.p-list{ border-bottom: 1px solid #f2f2f2;}
.p-title{ display: block; padding:0 0 0 17px; height: 44px;width: 100%; }
.p-title .left{height: 100%; line-height: 44px; font-size: 16px; font-weight: bold; color: #4e4e4e; }
.p-title .right{height: 100%; padding-right: 15px; line-height: 44px; font-size: 13px;color: #3396fb;   }
.gn-list{ padding-bottom: 10px;  overflow: hidden; }
span.g-left{height: 100%; width: 44px;   }
.gn-list{ /*height: 82px;*/ overflow: hidden; }
.gn-list li{padding:5px 0; float: left; width: 25%; overflow: hidden; position: relative;  }
.gn-list img{ display: block; width: 42.66%; min-height: 30px; margin:5px auto; }
.gn-list span{ display: block; width: 100%; text-align: center;font-size: 13px; color: #343434;}
.gn-list .weikai{ position: absolute;  background: rgba(0,0,0,0.6); top:40%;left:50%; width: 60px; margin-left: -30px; color: #e1e1e1;}
.gn-list .kai{ display: none; }
/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) center no-repeat; background-size: 12px 8px; }
.g-up{ background:url(../img/up_03.png) center no-repeat; background-size: 12px 8px; }

/*模态框*/
#sw-modal{ position: absolute; top:0;left: 0;z-index: 9; width: 100%;height: 100%; overflow: hidden;background:rgba(0,0,0,0.5); display: none; }
#sw-modal>div{ position: absolute; top:50%;left:50%; width: 90%;background: #fff; transform: translate(-50%,-50%);}
#sw-modal ul{padding:10px 15px; display: flex; flex-wrap:wrap; justify-content:space-between; border-bottom: 1px solid #eee;}
#sw-modal h5{text-align: center; margin:15px 0; color:#333; font-size: 16px; }
#sw-modal li{ float: left;padding: 5px 0;margin-bottom: 10px; min-width: 80px; width: 30%; border-radius: 3px; border: 1px solid #f2f2f2; text-align: center;font-size: 14px; color:#666; }
#sw-modal .active{ background:#2fa9fe ; color: #fff; }

#sw-modal a{ float:left; width: 50%; height: 45px; line-height: 45px; text-align: center; }
#sw-modal .m-btns{ overflow: hidden; }

/*底部导航*/
.footer{position:absolute;bottom:0;left:0;height: 50px;width:100%;border-top:1px solid #f2f2f2;background: #fff;
     box-shadow: 1px 0px 50px #cfcfcf; }
.footer a{ float: left;padding-top:28px; width:25%;height:100%;text-align: center;font-size: 13px;  color:#949494;}
.footer .dian{ float:right;width: 7px;height: 7px;border-radius: 50%; background:#eb5740;margin-right:30%;margin-top: -22px; }
/*底部导航图标*/
.foot-xiao{ background:url(../img/xin2_03.png) center 7px no-repeat ; background-size:23px 20px; }
.foot-xiao.active{ background-image:url(../img/xin1_03.png); color: #2fa9fe; background-size:23px 20px;  }
.foot-tong{ background:url(../img/t2_03.png) center 7px no-repeat ; background-size:19px 21px;  }
.foot-tong.active{ background-image:url(../img/t1_03.png); color: #2fa9fe; background-size:19px 21px; }
.foot-gn{ background:url(../img/g2_03.png) center 7px no-repeat ; background-size:20px 20px;  }
.foot-gn.active{ background-image:url(../img/g1_03.png); color: #2fa9fe;background-size:20px 20px; }
.foot-wo{ background:url(../img/r2_03.png) center 7px no-repeat ; background-size:17px 22px;}
.foot-wo.active{ background-image:url(../img/r1_03.png); color: #2fa9fe;background-size:17px 22px; }
</style>
</head>
<body>
<div class="page-container" id="page-container">
      	<div class="weui-tab page-wrap">
                <div class="p-img">
                       <img src="../img/b1_03.png" alt="">
                </div>
                <!-- 常用功能 -->
                <div class="p-list" id="changyong">
                        <div class="p-title">
                                <span class="left">常用功能</span>
                                <a class="right" href="set.html">编辑</a>
                        </div>
                        <!-- <ul class="gn-list">
                                <li><a href="###"><img src="../img/lgicon/m4.png"><span>考勤管理</span></a></li>
                                <li><a href="###"><img src="../img/lgicon/m8.png"><span>请假申请</span></a></li>
                                <li><a href="###"><img src="../img/lgicon/m9.png"><span>会议管理</span></a></li>
                                <li><a href="###"><img src="../img/lgicon/m49.png"><span>工资管理</span></a></li>
                                <li><a href="###"><img src="../img/lgicon/m22.png"><span>学生成长</span></a></li>
                                <li><a href="###"><img src="../img/lgicon/m23.png"><span>教师成长</span></a></li>
                                <li><a href="###"><img src="../img/lgicon/m48.png"><span>成绩查询</span></a></li>
                                <li><a href="###"><img src="../img/lgicon/m24.png"><span>社团管理</span></a></li>
                        </ul>  -->                 
                </div>
                 <!-- 其他功能选项 -->
                <div id="list-all">
                          <!-- <div class="p-list">
                                <a class="p-title">
                                       <span class="left">家校互动</span>
                                       <span class="right g-up"></span>
                                </a>
                                <ul class="gn-list list">
                                        <li><a href="###"><img src="../img/lgicon/m22.png"><span>学生成长</span></a></li>
                                        <li><a href="###"><img src="../img/lgicon/m23.png"><span>教师成长</span></a></li>
                                        <li><a href="###"><img src="../img/lgicon/m48.png"><span>成绩查询</span></a></li>
                                        <li><a href="###"><img src="../img/lgicon/m24.png"><span>社团管理</span></a></li>                                 
                                </ul>
                         </div> -->
                </div>    
      	</div>
  <!-- 底部导航 -->
  <div class="footer">
    <a class="foot-xiao" href="../xiaoxi/index.html"><i></i>消息</a>
    <a class="foot-tong" href="../tongxunlu/index.html"><i></i>通讯录</a>
    <a class="foot-gn  active"  href="../gongneng/index.html"><i></i>功能</a>
    <a class="foot-wo" href="../wode/index.html"><i class="dian"></i>我的</a>
  </div>     
</div>

<!-- 模态框 -->
<div id="sw-modal">
    <div id="mo-cont">
          <h5>选择年级</h5>
          <ul id="nianji">
              <li class="active">一年级</li>
              <li>二年级</li>
              <li>三年级</li>
          </ul>
          <h5>选择班级</h5>
          <ul id="banji">
              <li class="active">01班</li>
              <li>02班</li>
              <li>03班</li>
              <li>04班</li>
              <li>05班</li>
              <li>06班</li>
          </ul>
          <div class="m-btns">
              <a style="border-right: 1px solid #f2f2f2;">取消</a>
              <a id="okBtn" style="color:#2fa9fe ">确定</a>         
          </div>
    </div>
</div>
</body>
<script src="../js/data.js"></script>
<script>
$.showLoading();
$(function(){
// 常用功能 
var arr2Html = [];                      
$.each(obj.list, function(i,v){
      arr2Html.push('<li><a href="'+v.href+'"><img src="'+v.src+'"><span>'+v.name+'</span></a>'+
                                      '<span class="'+v.state+'">暂未开放</span></li>');
})
$("#changyong").html(
                 '<div class="p-title">'+
                        '<span class="left">常用功能</span>'+
                        '<a class="right" href="set.html">编辑</a>'+
                 '</div>'+
                 '<ul class="gn-list" style="height:auto;">'+arr2Html.join("") +'</ul>'
);

// 渲染数据 所有

      var  arrHtml = [] ;
      $.each(arr, function(i,v){
            var liarr=[];
            $.each(v.list,function(i2,v2){
                  liarr.push('<li><a href="'+v2.href+'""><img src="'+v2.src+'"><span>'+v2.name+'</span></a><span class="'+v2.state+'">暂未开放</span></li>');
            });

            if( v.title == "家校互动"){
                var str  =  '<div class="p-list">'+
                         '<a class="p-title">'+
                                '<span class="left">'+v.title+'</span>'+
                                // '<span class="right g-up"></span>'+
                                '<span class="right btn" id="banBtn">一年级01班</span>'+
                         '</a>'+
                         '<ul class="gn-list list">'+ liarr.join('')  + '</ul>'+
                     '</div>'
            }else{
                var str  = '<div class="p-list">'+
                         '<a class="p-title">'+
                                '<span class="left">'+v.title+'</span>'+
                                // '<span class="right g-up"></span>'+
                                // '<span class="right btn">dsfdf</span>'+
                         '</a>'+
                         '<ul class="gn-list list">'+ liarr.join('')  + '</ul>'+
                     '</div>'
            }
            arrHtml.push(str)
      });
      $("#list-all").html(  arrHtml.join("") );

     // 选择班级
     var str1="一年级",str2="01班";
     $("#banBtn").click(function(){
        $("#sw-modal").toggle();
        return false;
     })
    $("#nianji").find("li").click(function(){
         $("#nianji").find("li").removeClass("active");
         $(this).addClass("active");
         str1 = this.innerHTML;
         return false;
    })
    $("#banji").find("li").click(function(){
         $("#banji").find("li").removeClass("active");
         $(this).addClass("active");
          str2 = this.innerHTML;
         return false;     
    })

     $("#mo-cont").click(function(){
          return false; 
     })

     $("#okBtn").click(function(){
          $("#banBtn").text( str1+str2)
     })
     // 模态框消失
     $(document).click(function(){
          $("#sw-modal").hide();
     })
     $(".m-btns").find("a").click(function(){
          $("#sw-modal").hide();
     });
   $.hideLoading();
   $("#page-container").show(); 
});

</script>
</html>